<!--机构端-我的-查看成绩 -->
<template>
	<view class="container">
		<!-- 标题和筛选 -->
		<!--    <view class="header">
      <text class="title">学员成绩</text>
      <view class="filter">
        <u-input
          v-model="searchText"
          placeholder="输入学员姓名或手机号"
          clearable
          @clear="clearSearch"
        ></u-input>
        <u-button
          size="mini"
          type="primary"
          plain
          @click="showFilter = true"
          style="margin-left: 10px;"
        >
          成绩筛选
        </u-button>
      </view>
    </view> -->

		<!-- 学员成绩列表 -->
		<view class="card">
			<view class="table-header">
				<view class="th name">学员/手机号</view>
				<view class="th result">成绩</view>
				<view class="th filter">
					<u-dropdown>
						<u-dropdown-item v-model="optionValue" title="成绩筛选" :options="options1" @change="change"></u-dropdown-item>
					</u-dropdown>
				</view>

			</view>

			<view class="table-row" v-for="(item, index) in filteredStudents" :key="index">
				<view class="td name">{{ item.name }} {{ item.phone }}</view>
				<view class="td result">
					<text :class="['status', item.passed ? 'passed' : 'failed']">
						{{ item.level }}-{{ item.passed ? '通过' : '未通过' }}
					</text>
					<text class="score">实战{{ item.practical }}分，理论{{ item.theory }}分</text>
				</view>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<u-popup v-model="showFilter" mode="bottom" border-radius="20">
			<view class="filter-popup">
				<view class="popup-header">
					<text class="popup-title">成绩筛选</text>
					<u-icon name="close" @click="showFilter = false"></u-icon>
				</view>

				<view class="filter-item">
					<text class="filter-label">等级</text>
					<u-checkbox-group v-model="filter.level">
						<u-checkbox v-for="(item, index) in levels" :key="index" :name="item" shape="circle">{{ item }}</u-checkbox>
					</u-checkbox-group>
				</view>

				<view class="filter-item">
					<text class="filter-label">通过状态</text>
					<u-radio-group v-model="filter.passed">
						<u-radio v-for="(item, index) in passOptions" :key="index" :name="item.value">{{ item.label }}</u-radio>
					</u-radio-group>
				</view>

				<view class="filter-buttons">
					<u-button type="default" @click="resetFilter">重置</u-button>
					<u-button type="primary" @click="applyFilter">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				students: [{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						practical: 90,
						theory: 80,
						passed: true
					},
					{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						practical: 90,
						theory: 80,
						passed: true
					},
					{
						name: 'XXX',
						phone: '156666666',
						level: '四级',
						practical: 56,
						theory: 80,
						passed: false
					}
				],
				searchText: '',
				showFilter: false,
				levels: ['一级', '二级', '三级', '四级', '五级'],
				passOptions: [{
						label: '全部',
						value: null
					},
					{
						label: '通过',
						value: true
					},
					{
						label: '未通过',
						value: false
					}
				],
				filter: {
					level: ['四级'],
					passed: null
				},
				// 下拉筛选
				optionValue: 0,
				options1: [{
						label: '通过',
						value: 1,
					},
					{
						label: '未通过',
						value: 2,
					}
				]
			}
		},
		computed: {
			filteredStudents() {
				return this.students.filter(student => {
					// 搜索条件
					// const searchMatch = this.searchText === ''
					//  ||
					// 	student.name.includes(this.searchText) ||
					// 	student.phone.includes(this.searchText)

					// // 等级筛选
					// const levelMatch = this.filter.level.length === 0
					//  ||
					// 	this.filter.level.includes(student.level)

					// 通过状态筛选
					const passMatch = this.filter.passed === null 
					// ||
					// 	student.passed === this.filter.passed

					return student = this.students
				})
			}
		},
		methods: {
			clearSearch() {
				this.searchText = ''
			},
			applyFilter() {
				this.showFilter = false
			},
			resetFilter() {
				this.filter = {
					level: [],
					passed: null
				}
			},
			change(value) {
				
				console.log('change:', value)
				this.optionValue = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	// .header {
	//   margin-bottom: 20rpx;

	//   .title {
	//     font-size: 36rpx;
	//     font-weight: bold;
	//     margin-bottom: 20rpx;
	//     display: block;
	//   }

	//   .filter {
	//     display: flex;
	//     align-items: center;
	//   }
	// }

	.card {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.table-header {
		display: flex;
		background-color: #f5f5f5;
		padding: 10rpx;

		.th {
			font-size: 26rpx;
			color: #666;
			line-height: 41px;
			// font-weight: bold;

			&.name {
				width: 40%;
			}

			&.result {
				width: 30%;
			}

			&.filter {
				width: 30%;
				display: flex;
				flex-direction: column;
			}
		}
	}

	.table-row {
		display: flex;
		padding: 25rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		.td {
			font-size: 28rpx;
			color: #333;

			&.name {
				width: 40%;
			}

			&.result {
				width: 60%;
				display: flex;
				flex-direction: column;
			}

		}

		.status {
			font-weight: bold;
			margin-bottom: 8rpx;

			&.passed {
				color: #07C160;
			}

			&.failed {
				color: #FF4D4F;
			}
		}

		.score {
			font-size: 24rpx;
			color: #666;
		}
	}

	.filter-popup {
		padding: 30rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.filter-item {
			margin-bottom: 40rpx;

			.filter-label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: bold;
			}
		}

		.filter-buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			/deep/ .u-btn {
				width: 48%;
			}
		}
	}

	/deep/ .u-checkbox-group,
	/deep/ .u-radio-group {
		display: flex;
		flex-wrap: wrap;

		.u-checkbox,
		.u-radio {
			margin-right: 30rpx;
			margin-bottom: 15rpx;
		}
	}
</style>